<template>
  <div class="all-rel">
    <div class="all-flex-center-end all-top-handle">
      <router-link to="/type/add"><span class="all-add-btn el-icon-plus add-btn"></span></router-link>
    </div>
    <div class="table-box">
      <el-table ref="list" :data="list" border stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="list[props.$index].child" border size="small" :show-header="false" :row-style="{'background': '#fffef5'}">
              <el-table-column align="center" prop="classID" label="分类ID" width="80"></el-table-column>
              <el-table-column align="center" prop="className" label="分类名称" width="180"></el-table-column>
              <el-table-column align="center" prop="statusText" label="状态" width="180"></el-table-column>
              <el-table-column align="center" prop="addTime" label="添加时间" width="180"></el-table-column>
              <el-table-column></el-table-column>
              <el-table-column align="center" label="操作" width="305">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleStatus(scope.row)">{{list[props.$index].child[scope.$index].status === 1 ? "禁用" : "启用"}}</el-button>
                  <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                  <el-button size="mini" type="danger" style="visibility:hidden">删除发多</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="classID" label="分类ID" width="80"></el-table-column>
        <el-table-column align="center" prop="className" label="分类名称" width="180"></el-table-column>
        <el-table-column align="center" prop="statusText" label="状态" width="180"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间" width="180"></el-table-column>
        <el-table-column></el-table-column>
        <el-table-column align="center" label="操作" width="305">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleStatus(scope.row)">{{list[scope.$index].status === 1 ? "禁用" : "启用"}}</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="lookChild(scope.row)">查看子类</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    handleStatus(row) {
      const _this = this;
      this.$ajax({
        url: "Productclass/updateStatus",
        data: {
          app:{
            status: row.status === 1 ? 0 : 1,
            classID: row.classID
          }
        },
        success(res) {
          if (res.data.code === 1) {
            _this.$message({
              message: res.data.msg,
              type: 'success',
              onClose(){
                _this.$router.go(0);
              }
            });
          } else {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handleEdit(row) {
      window.sessionStorage.typeData = JSON.stringify(row);
      this.$router.push("/type/edit");
    },
    handleDelete(row) {
      const _this = this;
      this.$confirm("确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除操作
        _this.$ajax({
          url:'Productclass/delClass',
          data: {
            app: {
              classIDS: [row.classID]
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    lookChild(row) {
      this.$refs.list.toggleRowExpansion(row);
    }
  },
  created(){
    let _this = this;
    this.$ajax({
      url:'productclass/getlist',
      success(res) {
        if (res.data.code === 1) {
          _this.list = res.data.content.list;
        } else {
          _this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      }
    });
  }
};
</script>

<style scoped>
.title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
.el-table >>> .el-table__expanded-cell {
  padding-right: 0 !important;
  padding-left: 48px !important;
}
</style>
